<template>
	<view class="dhl">
			<scroll-view class="tabs-title" scroll-x>
				<view :class="active === index ? 'active' : '' "v-for="(item,index) in tabList" :key="index" @click="ontabtap(index)">{{item.name}}</view>
			</scroll-view>
			<scroll-view class="sp" v-for="(item,index) in videos" :key="index">
			  <videoo :item="item" :index="index" :active="active"></videoo>
			</scroll-view>
	</view>
</template>

<script>
	import {friendlyDate} from '../../common/util.js'
	import videoo from '../../components/videoo.vue'
	export default {
		components: {
			'videoo':videoo
		},
		data() {
			return {
				active: 0,
				tabList: [{
					id: "tab01",
					name:'推荐'
				},{
				  id: "tab02",
				  name: '党史'
				},
				{
				  id: "tab03",
				  name: '娱乐'
				},
				{
				  id: "tab04",
				  name: '广东'
				},
				{
				  id: "tab05",
				  name: '综合'
				},{
				  id: "tab02",
				  name: '要闻'
				},
				{
				  id: "tab03",
				  name: '新思想'
				},
				{
				  id: "tab06",
				  name: '科技'
				},
				{
				  id: "tab07",
				  name: '军事'
				},
				{
				  id: "tab08",
				  name: '体育'
				},
				{
				  id: "tab09",
				  name: '文化'
				}],
				videos: []
			}
		},
		methods: {
			ontabtap(index) {
				this.active = index
				console.log(this.active)
				this.requestViedoList()
			},
			async requestViedoList() {
				const res = await this.$myRequest({
					url : "/video",
					method: 'POST',
					data: {
						type: this.active,
					}
				})
				console.log(res)
				for (var index in res.data) {
					res.data[index].datetime = friendlyDate(new Date(res.data[index].datetime))
				}
				this.videos = res.data
				console.log('videos:',this.videos)
			},
		},
		onLoad() {
			this.requestViedoList()
		}
	}
</script>

<style lang="scss">
// .fz {
// 	height: 500px;
// 	background-color: #eae8e8;
// }
.tabs-title {
  width: 100%; /* 宽度占满 */
  height: 80rpx; /* 适当的高度 */
  background-color: #ffffff;
  box-sizing: border-box;
  white-space: nowrap; /* 禁止换行 */
  display: flex; /* 启用flex布局 */
  flex-direction: row; /* 横向排列 */
  
  view {
    display: inline-flex;
    align-items: center;
    padding: 0 30rpx; /* 左右间距 */
    font-size: 28rpx;
    color: #333;
    height: 100%; /* 和父级同高 */
    position: relative;
    flex-shrink: 0; /* 禁止压缩 */
    
    &.active {
      color: #aa0000;
      &::after {
        content: '';
        position: absolute;
        bottom: 0;
        left: 50%;
        transform: translateX(-50%);
        width: 60%;
        height: 6rpx;
        background-color: #aa0000;
      }
    }
  }
}
.dhl {
	background-color: #eae8e8;
	// height: 2000px;
}
.sp {
	background-color: #fff;
	margin-bottom: 10px;
	width: 100%;
}

/* 移动端优化 */
@media (max-width: 768px) {
  .tabs-title {
    height: 70rpx;
    view {
      font-size: 24rpx;
      padding: 0 20rpx;
    }
  }
}

</style>
